<template>
  <view class="container">
    <!-- 头部 -->
    <!-- 头像和昵称区域 -->
    <view class="header">
      <image
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F09%2F20210609100330_78ce2.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669019761&t=5974fa6eb0a81342d70c9c2a042536fes"
        class="avator" mode=""></image>
      <view class="nickname">
        皮卡丘
      </view>

    </view>

    <!-- 表单 -->
    <view class="out_account">




      <uni-section title="请输入您的用户名和密码进行认证" type="line">
        <view class="account">
          <uni-forms ref="signUpForm" :model="formData" :rules="rules">
            <uni-forms-item label="用户账户:" :labelWidth="80" name="name">
              <block class="account-bb">
                <uni-easyinput type="text" v-model="formData.name" placeholder="请输入账号" />
              </block>
            </uni-forms-item>
            <uni-forms-item label="用户密码:" :labelWidth="80" name="password">
              <uni-easyinput type="password" size="default" v-model="formData.password" placeholder="请输入密码" />
            </uni-forms-item>

          </uni-forms>


        </view>
      </uni-section>

    </view>
    <!-- 底部 -->


    <!-- <u-button class="footer" type="primary" click="handleSignUp" text="提交"></u-button> -->
    <button class="footer" type="primary" click="handleSignUp" text="提交">提交认证

    </button>
  </view>
</template>

<script>
export default {
  data () {
    return {
      //表单数据
      formData: {
        name: '傻蛋',
        password: 'agsag'
      },
      rules: {
        // 对name字段进行必填验证
        name: {
          rules: [{
            required: true,
            errorMessage: '请输入账号'
          }, {
            minLength: 3,
            maxLength: 5,
            errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
          }]
        },
        password: {
          rules: [{
            required: true,
            errorMessage: '请输入密码',

          },
          {
            minLength: 0,
            maxLength: 12,
            errorMessage: '长度不超过 12 个字符'

          },
          {
            validateFunction: function (rule, value, data, callback) {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else if (this.checkPass(value) < 3) {
                callback(new Error('密码应为数字、字母、字符最少三种组合!不能只一种组合!'));
              } else {
                callback();
              }
              return true
            }
          }]
        },
        label: '密码',
        validateTrigger: 'blur'

      }
    }
  },
  methods: {
    checkPass (pass) {
      //密码长度大于6开始判断密码强度
      if (pass.length < 6) {
        return 0;
      }
      //判断密码中是否有数字、大小写字母、特殊符号  

      var ls = 0; //默认等级是0
      // 判断有没有小写字母
      if (pass.match(/([a-z])+/)) {
        ls++;
      }
      // 判断有没有大写字母
      if (pass.match(/([A-Z])+/)) {
        ls++;
      }
      // 判断数字
      if (pass.match(/([0-9])+/)) {
        ls++;
      }
      // 判断有没有特殊符号
      if (pass.match(/[^a-zA-Z0-9]+/)) {
        ls++;
      }
      return ls //默认传出是1
    }
  }
}
</script>

<style lang="scss">
.header {
  clear: both;
  height: 206px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .avator {
    margin-bottom: 35px;
    width: 55px;
    height: 54px;
    border-radius: 45px;
    border: 2px solid white;
    box-shadow: 0 1px 5px black;
  }

  .nickname {
    margin-top: 15px;
    color: white;
    font-size: 16px;
    font-weight: block;
  }

}


.out_account {



  width: 342px;


  position: relative;
  top: -15px;
  left: 15px;

  .form_title {
    height: 52px;
    line-height: 52px;
    text-align: left;
    font-size: 14px;

  }

  .account {

    padding: 10px 10px;
    height: 250px;

    .form_title {
      border-bottom: 1px solid #F0EEEE;
    }


  }


}

.footer {
  width: 100%;
  position: fixed !important;
  bottom: 0;

}
</style>
